import React from "react";
import { connect } from "react-redux";
const mapStateProps = (state) => {
  return { list: state.list };
};
const mapDispatchToprops = (dispatch) => {
  return {
    remove(value) {
      dispatch({
        type: "remove",
        task: value,
      });
    },
    changeVisible() {
      dispatch({
        type: "changeVisible",
        // task: value,
      });
    },
    up(value) {
      dispatch({
        type: "up",
        task: value,
      });
    },
    down(value) {
      dispatch({
        type: "down",
        task: value,
      });
    },
    changeStatus(value) {
      dispatch({
        type: "changeStatus",
        task: value,
      });
    },
  };
};
function List(props) {
  const { form, list, remove, changeVisible, up, down, changeStatus } = props;
  //删除
  const removeValue = (id) => {
    remove(id);
  };
  //更新
  const update = (val) => {
    changeVisible();
    changeStatus(val.key);
    form.setFieldsValue(val);
  };
  //上移
  const moveUp = (val) => {
    up(val);
  };
  //下移
  const moveDown = (val) => {
    down(val);
  };
  return (
    <div>
      {list.map((item) => (
        <div
          style={{
            border: "1px solid #ccc",
            width: 580,
            height: 90,
            display: "flex",
            justifyContent: "space-between",
            margin: 10,
          }}
          key={item.key}
        >
          <div>
            <p style={{ margin: "5px 5px" }}>{item.name}</p>
            <p style={{ margin: "5px 5px" }}>{item.age}</p>
            <p style={{ margin: "5px 5px" }}>{item.address}</p>
          </div>
          <div style={{ width: 230 }}>
            {list.indexOf(item) !== 0 && (
              <button
                style={{ width: 100, margin: "8px 5px" }}
                onClick={() => moveUp(item)}
              >
                上移
              </button>
            )}
            {list.indexOf(item) !== list.length - 1 && (
              <button
                style={{ width: 100, margin: "5px 5px" }}
                onClick={() => moveDown(item)}
              >
                下移
              </button>
            )}

            <button
              style={{ width: 100, margin: "5px 5px" }}
              onClick={() => update(item)}
            >
              更新
            </button>
            <button
              style={{ width: 100, margin: "8px 5px" }}
              onClick={() => removeValue(item.key)}
            >
              删除
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}
export default connect(mapStateProps, mapDispatchToprops)(List);
